<template>
  <el-card style="margin-top: 20px">
    <template #header>
      <div class="card-header">
        <!-- <img src="../../assets/logo.png" style="width: 50px; height: 50px" /> -->
        <span>商品信息列表</span>
      </div>
    </template>
    <el-row :gutter="10">
      <el-input
          placeholder="商品名称或型号"
          v-model="searchContent"
          style="width: 150px;margin-right:10px;"
        ></el-input
      > 
        <el-button type="primary"  size="mini" @click="handlerSearch">搜索</el-button>
        <el-button type="primary"  size="mini" @click="showAddProductDialog">添加</el-button>
       
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="型号" />
       <el-table-column prop="unitName" label="单位" />
      <el-table-column prop="categoryName" label="分类" />
      <el-table-column prop="spec" label="幅宽" />
      <el-table-column prop="price" label="价格" />
      <el-table-column prop="taxRate" label="税率(%)" />
      <el-table-column label="图片">
        <template #default="scope">
          <img
            style="width: 100px; height: 100px"
            :key="scope.row.imageUrl"
            :src="scope.row.imageUrl"
            alt="商品主图"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template #default="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            type="primary"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >

          <el-button
            size="mini"
            @click="handleDetail(scope.$index, scope.row)"
            type="primary"
            >详情</el-button
            
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float: right; margin-top: 10px"
      :currentPage="currentPage"
      :page-size="10"
      :page-sizes="[10, 20, 100, 500]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-card>
  <ProductAdd
    :centerDialogVisible="centerDialogVisible"
    @onCloseDialog="closeDialogVisible()"
  ></ProductAdd>
<ProductEdit v-if="editDialogVisible === true"  
     :productId="id" 
   :editDialogVisible="editDialogVisible" 
   @onEditCloseDialog="closeEditDialogVisible"></ProductEdit> 

<ProductDetail v-if="detailDialogVisible === true"  
     :productId="id" 
   :detailDialogVisible="detailDialogVisible" 
   @onDetailCloseDialog="closeDetailDialogVisible"></ProductDetail> 


</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import ProductAdd from "../../components/pro/ProductAdd.vue";
import ProductEdit from "../../components/pro/ProductEdit.vue";
import ProductDetail from "../../components/pro/ProductDetail.vue";
import {
  useHandlerEdit,
  useHandleSizeChange,
  useHandleCurrentChange,
  useHandlerSearch,
  useDelete,
  loadData,
  useHandlerDetail
} from "../../utils/api";

export default {
  name: "ProductInfo",
  components: {
    ProductAdd,ProductEdit,ProductDetail
  },
  created() {},
  setup() {
    const baseUrl = "/product/basic/list";
    const state = reactive({
      searchContent: "",
      tableData: [],

      centerDialogVisible: false,
      editDialogVisible: false,
      detailDialogVisible: false,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      id: "",
      baseUrl,
      productName: "",
    });

    onMounted(() => {
      loadData(state, state.baseUrl);
    });

    return {
      state,
      ...toRefs(state), //解构响应式数据
      ...useDelete(state, baseUrl),
      ...useHandlerSearch(state, baseUrl),
      ...useHandlerEdit(state),
      ...useHandleSizeChange(state, baseUrl),
      ...useHandleCurrentChange(state, baseUrl),
      ...useHandlerDetail(state)
    };
  },
  methods: {
    showAddProductDialog() {
      this.state.centerDialogVisible = true;
    },

    closeDialogVisible(visible, data) {
      this.state.centerDialogVisible = false;
      loadData(this.state, this.state.baseUrl);
    },

   closeDetailDialogVisible(visible, data) {
      this.state.detailDialogVisible = visible;
    },

    closeEditDialogVisible(visible, data) {
      this.state.editDialogVisible = visible;

      if (data !== undefined) {
        loadData(this.state, this.state.baseUrl);
      }
    },
    currentChange(pageNo) {
      this.state.currentPage = pageNo;
      loadData(this.state, this.state.baseUrl);
    },
  },
};
</script>